<template>
    <div class="index-container">
        <v-breadcrumb :breadcrumbData="[{name:'系统管理'},{name:'操作日志'}]"></v-breadcrumb>

        <div class="g-box" style="min-height:584px">
            <el-table :data="list" :fit="true" stripe border :header-cell-style="{background:'#eee'}">
                <el-table-column prop="id" label="ID" width="150"></el-table-column>
                <el-table-column prop="user_id" label="用户ID" width="150"></el-table-column>
                <el-table-column prop="url" label="接口地址" width="350"></el-table-column>
                <el-table-column prop="query" label="参数"></el-table-column>
                <el-table-column prop="ip" label="IP" width="150"></el-table-column>
                <el-table-column label="操作时间" width="165">
                    <template slot-scope="scope">{{ scope.row.c_time|formatDateTime }}</template>
                </el-table-column>
            </el-table>
            <div class="clearfix"></div>
            <div class="pagination mt-30 mb-10 t-center">
                <el-pagination background layout="total,sizes,prev,pager,next,jumper"
                               :page-size="obj.size"
                               :page-sizes="[10,20,50,100]"
                               :current-page.sync="obj.page"
                               :total="total"
                               @size-change="changeSize"
                               @current-change="changeCurrent">
                </el-pagination>
            </div>
        </div>

    </div>
</template>

<script type="text/ecmascript-6">
import {tool} from "../../common/js/tool.js";
import request from '../../common/js/request.js';

export default {
    data() {
        return {
            obj: {
                page: 1,
                size: 10
            },
            total: 0,
            list: []
        };
    },

    computed: {},

    created() {
        this.getData();
    },

    methods: {
        getData(pageNum) {
            this.obj.page = !!pageNum ? this.obj.page : 1;
            request({
                url: '/manage/userLog/list',
                data: {page: this.obj.page, size: this.obj.size}
            }).then((res) => {
                this.list = res.data.data;
                this.total = res.data.total;
            })
        },

        changeCurrent(val) {
            this.obj.page = val;
            this.getData(true);
        },

        changeSize(e) {
            this.obj.size = e;
            this.obj.page = 1;
            this.getData();
        },
    },

};
</script>

<style lang="less" rel="stylesheet/less" scoped>
@import url("../../common/css/variable.less");

.index-container {
    .image {
        width: 50px;
        height: 50px;
        border: none;
        margin-top: 5px;
    }
}
</style>
